/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: app/[locale]/industries/page.tsx
 * Description: Industries page — the twelve sectors served by Hilmacorp.ai
 */

import type { Metadata } from "next";
import Container from "@/components/Container";
import SectionHeading from "@/components/SectionHeading";
import { getMessages, isLocale, type Locale } from "@/lib/i18n";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  if (!isLocale(locale)) return {};
  const { meta } = getMessages(locale);
  return { title: { absolute: meta.industries.title }, description: meta.industries.description };
}

export default async function IndustriesPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { industries } = getMessages(locale as Locale);

  return (
    <>
      <section className="relative overflow-hidden border-b border-line">
        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />
        <Container className="relative py-20 sm:py-28">
          <SectionHeading as="h1" title={industries.title} lead={industries.lead} />
        </Container>
      </section>

      <section className="py-16 sm:py-20">
        <Container>
          <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {industries.items.map((industry) => (
              <li
                key={industry.title}
                className="rounded-2xl border border-line bg-card p-7 shadow-sm transition-colors hover:border-accent"
              >
                <h2 className="font-display text-lg font-semibold text-ink">
                  {industry.title}
                </h2>
                <p className="mt-2 text-sm leading-relaxed text-ink-faint">{industry.body}</p>
              </li>
            ))}
          </ul>
        </Container>
      </section>
    </>
  );
}